<template>
	<view class="container">
		<view class="content">
			<view class="lock_name_title"> 门锁名称</view>
			<input class="input_lock_name" v-model.trim="lockName" placeholder="请输入门锁名称(最长20个字符)" maxlength="20" />

			<view class="lock_name_title"> 所属企业</view>
			<uni-section>
				<uni-data-select v-model="institutionId" :localdata="institutionList" @change="change" placeholder="" v-if="show">
				</uni-data-select>
			</uni-section>
		</view>
		<view class="bootom_lay">
			<view @click="addLock()">确 定</view>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	import {
		getInstitutionList,
		addLock
	} from '@/api/mine.js';
	export default {
		data() {
			return {
				userId: this.$userInfo.userId,
				mobile: this.$userInfo.mobile,
				qrCode: '', //二维码值
				lockName: '', //锁名称	
				show:false,
				institutionId: 0, //所属企业
				institutionList: [
					// {
					// 	value: '1696441656403968001',
					// 	text: "南湖"
					// },
					// {
					// 	value: '1737301272785227778',
					// 	text: "永安行"
					// }					
				],
			};
		},
		onLoad(option) {
			this.userId = this.$userInfo.userId;
			this.qrCode = option.qrCode; // 二维码值		
			this.getInstitutionList();
		},
		// onShow() {
		// 	this.getInstitutionList();
		// },
		onUnload() {
			console.log('onUnload');
		},
		methods: { //wxe8b68f8e5e96e487
			change(e) {
				console.log("e:", e);
			},
			commit() { //确定提交数据
				this.addLock()
			},
			async getInstitutionList() {				
				let res = await getInstitutionList();
				console.log('res',res);
				if (res.statecode === '0') {
					this.institutionList = await this.analyData(res.data);
					this.show = true;
					console.log('institutionList:',this.institutionList);
				} else {
					util.toast(res.statemsg);
				}
			},
			async analyData(data) {
				let ret = [];
				let item = {};
				for (let i = 0 ; i<data.length; i++) {
					item = {
						'value':data[i].institutionId,
						'text':data[i].institutionName,
					};
					ret.push(item);
				}
				console.log('ret',ret);
				return ret;				
			},
			async addLock() {
				try {
					if (this.lockName.length == 0) {
						util.alert("门锁名称不能为空")
						return
					}

					const param = {
						qrCode: this.qrCode,
						institutionId: this.institutionId,
						lockName: this.lockName,
						installMobile: this.mobile,
					}

					const res = await addLock(param);
					console.log('addLock resp', res)

					if (res.statecode != '0') {
						util.alert(res.statemsg)
						return;
					}
					uni.navigateTo({
						url: '/pages/mine/addlock/addLockList'
					})

				} catch (err) {
					util.toast(err);
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		display: flex;

		.bootom_lay {
			position: absolute;
			bottom: 0rpx;
			left: 32rpx;
			right: 32rpx;
			bottom: 40rpx;

			:nth-child(1) {

				text-align: center;
				margin-top: 20rpx;
				color: #ffffff;
				line-height: 88rpx;
				height: 88rpx;
				border-radius: 10px;
				border: 1px solid #1D78F7;
				background: linear-gradient(135deg, #4593FF, #1C78F7);
				border-radius: 10px;
			}
		}

		.content {
			margin-left: 32rpx;
			margin-right: 32rpx;
			flex: 1;
		}

		background: white;
		font-size: 32rpx;
		color: #1F2642;

		.lock_name_title {
			margin-top: 80rpx;
			font-weight: bold;

		}

		.input_lock_name {
			margin-top: 40rpx;
			height: 96rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;
			background: #F8F8FA;
			border-radius: 10px;
		}

		.remark_title {
			font-weight: bold;
			margin-top: 80rpx;

		}

		.textarea_lay {
			height: 148rpx;
			margin-top: 40rpx;
			background: #F8F8FA;
			border-radius: 10px;
			padding: 24rpx;
			padding-bottom: 40rpx;

			:nth-child(1) {
				textarea {
					width: 100%;
				}

				height: 128rpx;
			}

			:nth-child(2) {
				text-align: right;

			}


		}

		.remark_img_lay {
			margin-top: 40rpx;
			height: 176rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;
			background: #F8F8FA;
			border-radius: 10px;
			display: flex;
			align-items: center;

			.delete_bt {
				position: absolute;
				top: -10rpx;
				left: 100rpx;
				width: 32rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				border-radius: 50%;
				background: #7B7B7C;
				color: #ffffff;
				font-size: 12px;
			}
		}

		.commit1 {
			margin-top: 32rpx;
			margin-bottom: 40rpx;
			color: white;
			margin-left: 32rpx;
			margin-right: 32rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background: linear-gradient(135deg, #4593FF, #1C78F7);
			border-radius: 10px;
		}

	}

	::v-deep.uni-stat__select {
		background: #F8F8FA;
		border-radius: 16rpx;
		padding: 12rpx !important;
		margin-top: 40rpx;

		.uni-select {
			border: 0rpx;
			border-bottom: 0rpx;
		}
	}

	::v-deep.uni-stat__actived {
		outline: 0rpx !important;
	}
</style>
